<template>
    <!--终审列表-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('audit.finalReviewList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="User ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userType" > <!--用户类型-->
                            <el-select v-model="form.userType" :clearable='true' :multiple="true" :placeholder="$t('common.userType')" style="width: 100%">
                                <el-option key="0" :label="$t('common.newUser')" value="0"></el-option>
                                <el-option key="1" :label="$t('common.secNewUser')" value="1"></el-option>
                                <el-option key="2" :label="$t('common.oldUser')" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userName"> <!--姓名-->
                            <el-input v-model="form.userName" type="text" :placeholder="$t('common.name')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="marketChannel" label="">
                            <el-input v-model="form.marketChannel" :placeholder="$t('common.applicationMarket')" clearable></el-input><!--应用市场-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="source" label="">
                            <el-input v-model="form.source" :placeholder="$t('common.applyChannel')" clearable></el-input><!--申请渠道-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :multiple="true" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appVersion" label="">
                            <el-input v-model="form.appVersion" :placeholder="$t('common.versionName')" clearable></el-input><!--版本号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appPackage" label="">
                            <el-input v-model="form.appPackage" :placeholder="$t('system.appPackage')" clearable></el-input><!--app包名-->
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="applyTime" label=""><!--申请时间-->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.applyTime"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm"
                                value-format="timestamp"
                                :editable="false"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('common.applyStartTime')"
                                :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button v-if="exportButtonShow" @click="exportData" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;"
                              :max-height="tableMaxHeight" :highlight-current-row="true" :row-class-name="tableRowClassName">
                        <el-table-column prop="userName" :label="$t('common.name')" min-width="180"></el-table-column><!--姓名-->
                        <el-table-column prop="userId" label="User Id" width="100"></el-table-column>
                        <el-table-column prop="userPhone" :label="$t('common.mobileNumber')" width="150"></el-table-column><!--手机号-->
                        <el-table-column prop="userType" :label="$t('common.userType')" width="150"><!--用户类型-->
                            <template slot-scope="scope">
                                <span :class="{'green-color' : +scope.row.userType === 1, 'blue-color' : +scope.row.userType === 2 }">{{ scope.row.userType | switchUserType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderId" width="200" :label="$t('common.innerOrderId')"><!--内部订单号-->
                            <template slot-scope="{ row }">
                                <a @click="goDetail(row)" type="text" size="small" href="javascript:void(0);">{{ row.orderId }}</a>
                            </template>
                        </el-table-column><!--内部订单号-->
                        <el-table-column prop="contractAmount" :label="$t('common.contractAmount')" width="150"><!--合同金额-->
                            <template slot-scope="scope">{{ scope.row.contractAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column prop="loanPeriod" :label="$t('common.borrowingCycle')" width="180"></el-table-column><!--借款周期-->
                        <el-table-column prop="borrowTime" min-width="180" :label="$t('common.applyDate')"><!--申请日期-->
                            <template slot-scope="scope">{{ scope.row.borrowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="overdueHours" :label="$t('common.notProcessTime')" width="180"><!--未处理时长-->
                            <template slot-scope="scope">{{ isNaN(scope.row.overdueHours) ? '--'  : (scope.row.overdueHours + 'h') }}</template>
                        </el-table-column>
                        <el-table-column prop="firstJudgerName" :label="$t('audit.firstReviewer')" width="150"></el-table-column><!--初审员-->
                        <el-table-column prop="remark" :label="$t('common.remark')" width="150"><!--备注-->
                            <template slot-scope="scope">
                                <div @click="addRemark(scope.row)" class="edit_remark">
                                    <span v-if="!scope.row.remark || (scope.row.remark && scope.row.remark.length <= 7)"><i class="el-icon-edit"></i>{{ scope.row.remark }}</span>
                                    <el-popover v-if="scope.row.remark && scope.row.remark.length > 7" trigger="hover" placement="top">
                                        <p>{{ scope.row.remark }}</p>
                                        <div slot="reference">
                                            <i class="el-icon-edit"></i>
                                            <span v-if="scope.row.remark.length > 7">{{ scope.row.remark.substr(0, 7) }}...</span>
                                            <span v-else>{{ scope.row.remark }}</span>
                                        </div>
                                    </el-popover>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.applicationMarket')" prop="marketChannel" min-width="130"></el-table-column><!--应用市场-->
                        <el-table-column align="left" :label="$t('common.applyChannel')" prop="source" min-width="130"></el-table-column><!--申请渠道-->
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column align="left" :label="$t('common.versionName')" prop="appVersion" min-width="130"></el-table-column><!--版本号-->
                        <el-table-column align="left" :label="$t('system.appPackage')" prop="appPackage" min-width="180"></el-table-column><!--APP包名-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>

        <!--添加备注start-->
        <el-dialog :visible.sync="showRemarkDialog" width="416px" :title="$t('common.addRemark')">
            <el-form :model="remarkForm">
                <el-form-item :label="$t('common.remark')"><!--备注-->
                    <el-input v-model="remarkForm.remark" type="textarea" :rows="5" :maxlength="500"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button :disabled="!remarkForm.remark" @click="submitRemark" type="primary">{{$t('common.save')}}</el-button>
                <el-button @click="showRemarkDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--添加备注end-->
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import SelectAppList from '@/components/select-app-list';
    import SelectKanaList from '@/components/select-kana-list';

    let that = null;
    export default {
        name: 'audit-orderManage-finalReviewList',
        components: {
            Pagination,
            SelectAppList,
            SelectKanaList
        },
        mixins: [mixin],
        data() {
            return {
                domain:'',
                user: this.$storage.get('user'),
                form: {
                    orderId: '',
                    userId: '',
                    userType: [],
                    userName: '',
                    userPhone: '',
                    applyTime: '',
                    marketChannel: '',
                    source: '',
                    appName: [],
                    appVersion: '',
                    appPackage: '',
                    kana:'',
                    whiteProductName:'',
                },
                rules: {
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userPhone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    applyTime: [],
                },
                remarkForm: {
                    orderId: '',
                    remark: ''
                },
                showRemarkDialog: false,
                orderStatus: '',
                entrySwitch: '',
                roleId: '',
            };
        },
        computed: {
            exportButtonShow() {
                // 导出按钮展示权限
                return this.$store.getters.checkUserAuthority('audit.orderManage.finalReviewList.export');
            },
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.audit.list(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.data;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 325;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 导出列表数据
            exportData() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.token = user.token;
                params.language = language;
                params.Authorization = 'Basic cGluamFtYW5nbzpwaW5qYW1hbmdvMDE4';
                params.source = encodeURIComponent(params.source); //针对特殊渠道转码
                delete params.page;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.audit.getOrderList, []);
                this.$openNewBlank(url);
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    type: 2,
                    orderId: '',
                    userName: '',
                    userPhone: '',
                    userId: '',
                    userTypes: form.userType,
                    startTime: '',
                    endTime: '',
                    marketChannel: '',
                    source: '',
                    appNames: form.appName,
                    appVersion: '',
                    appPackage: '',
                    kana:'',
                    whiteProductName:'',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.applyTime) {
                    params.startTime = form.applyTime[0];
                    params.endTime = form.applyTime[1];
                }
                return params;
            },
            goDetail(row) {
                this.$api.audit.getOrderAuditBaseInfo({ orderId: row.orderId }).then((res) => {
                    const { status, data, error } = res;
                    if ('1' === status && error === '00000000') {
                        const orderStatus = data.auditOrder;
                        if (orderStatus.rcaStatus === 'ADMITTANCE_REFUSE') {
                            // 准入失败
                            this.orderStatus = -1;
                        } else if (orderStatus.status === 'AUDIT_CHECK') {
                            // 复核状态
                            this.orderStatus = 3;
                        } else if (orderStatus.disStatus === 0) {
                            // 待分配
                            this.orderStatus = 0;
                        } else if (orderStatus.disStatus === 1 && orderStatus.status === 'BORROW_AUDIT') {
                            // 初审
                            this.orderStatus = 1;
                        } else if (orderStatus.status === 'AUDIT_SUCCESS') { // 临时处权限处理
                            // 终审
                            this.orderStatus = 2;
                        } else if (orderStatus.status === 'LAST_AUDIT_SUCCESS') {
                            // 终审通过
                            this.orderStatus = 4;
                        } else if (orderStatus.status === 'AUDIT_REFUSE') {
                            // 信审拒绝
                            this.orderStatus = 5;
                        }
                        if (this.orderStatus === 2) {
                            this.$storage.set('userId', row.userId);
                            this.$storage.set('locale', this.$root.local);
                            this.$openNewBlank(`#/conf/audit/order-manage/audit-detail/${row.userId}/${row.orderId}/true`);
                        } else if (this.orderStatus !== 2) {
                            this.$message.success(this.$t('audit.orderHasDeal'));
                            this.getTableData({ currentPage: this.page.currentPage });
                        }
                    }
                });
            },
            addRemark(row) {
                this.remarkForm.orderId = row.orderId;
                this.remarkForm.remark = row.remark;
                this.showRemarkDialog = true;
            },
            submitRemark() {
                this.remarkForm.remark = this.remarkForm.remark.trim();
                if (!this.remarkForm.remark) {
                    return;
                }
                const params = {
                    orderId: this.remarkForm.orderId,
                    remark: this.remarkForm.remark
                };
                this.$api.audit.orderRemark(params).then((res) => {
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error) {
                        this.showRemarkDialog = false;
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.getTableData();
                    }
                });
            },
            tableRowClassName({row, rowIndex}) {
                if (row.supplementInfo == '1') {
                    return 'red-row';
                }
                return '';
            }
        },
        filters: {
            switchUserType(type) {
                switch (+type) {
                    case 0:
                        return that.$t('common.newUser');// 新户
                    case 1:
                        return that.$t('common.secNewUser');// 次新户
                    case 2:
                        return that.$t('common.oldUser');// 老户
                    default:
                        return '';
                }
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            that = this;
            this.getTableData({currentPage: this.page.currentPage}, this.form);
        },
    };
</script>

<style lang="scss">
    [data-page=audit-orderManage-finalReviewList] {
        .el-table .red-row {
            color: red;
        }
        .noteRed {
            color: red;
        }
        .blue-color {
            color: #1983FA;
        }
        .green-color {
            color: green;
        }
        .el-col {
            padding-left: 10px;
        }
        .content_panel_top {
            .el-button {
                margin-bottom: 18px
            }
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .el-table__row {
            .el-button {
                margin-bottom: 0px
            }
        }
    }
</style>
